第10款插件：jquery.jqzoom.js放大镜效果插件

描述：将鼠标放置在图片的某一点上时可以在右侧单独显示此点附近放大的图像，用于需要局部放大功能的场合。
兼容浏览器：IE所有浏览器/Firefox/Google Chrome
官方链接： http://www.mind-projects.it/projects/jqzoom/
JS下载： http://www.ijquery.cn/js/jquery.jqzoom1.0.1.js
预览： http://www.ijquery.cn/study/demo/jqzoom
打包下载： http://www.ijquery.cn/study/demo/jqzoom/jqzoom.zip
参数说明： $('对象').jqzoom();
图片展示：

JS引用代码：

[js]

<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery.jqzoom1.0.1.js"></script>
<script>
$(function () {
$('.jqzoom').jqzoom();
});
</script>

[/js]

HTML代码：

[html]

<a href="images/big.jpg" style="" title="kawasaki">
<img src="images/small.jpg"  title="kawasakigreen" style="border: 1px solid #666;">
</a>

[/html]

CSS代码：

[css]

<link rel="stylesheet" type="text/css" href="http://www.ijquery.cn/js/jquery.jqzoom1.0.1.css" media="screen" />

[/css]

代码如下：

[css]

.jqzoom{
border:1px solid black;
float:left;
position:relative;
padding:0px;
cursor:pointer;
}

.jqzoom img{
float:left;
}

div.zoomdiv {
z-index                 : 100;
position                : absolute;
top:0px;
left:0px;
width                   : 200px;
height                  : 200px;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;
}

div.jqZoomPup {
z-index                 : 10;
visibility              : hidden;
position                : absolute;
top:0px;
left:0px;
width                   : 50px;
height                  : 50px;
border: 1px solid #aaa;
background: #ffffff url(../images/zoom.gif) 50% top  no-repeat;;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
}

[/css]